<template>
    <transition name="fade">
      <div class="wrapper wrapper-content animated fadeInRight">
      <!-- <h5 v-if="flag"> -->
        <div class="row">
          <div class="col-sm-13">
            <div class="block">
               <el-carousel indicator-position="outside" :height="banH +'px'" interval="5000">
                  <el-carousel-item v-for="item in images" :key="item.id">
                    <img :src="item.idView"></img>
                  </el-carousel-item>
                </el-carousel>
              </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-13">
            <div class="ibox float-e-margins" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div class="ibox-title">
                <h5>订单</h5>
              </div>
              <div class="ibox-content">
                <div class="row">
                  <div class="">
                    <div class="flot-chart col-sm-9">
                      <div style="height: 220px;" ref="flotChart"></div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <ul class="stat-list">
                      <li v-for="item in orderTab">
                        <h2 class="no-margins">{{item.num}}</h2>
                        <small>{{item.title}}</small>
                        <div class="stat-percent">{{item.persent}} <i class="text-navy"
                            :class="titleMsgIcon[item.state]"></i>
                        </div>
                        <div class="progress progress-mini">
                          <div :style="`width: ${item.persent};`" class="progress-bar"></div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        
      </div>
      <!-- </h5> -->
    </transition>
</template>

<script>
  export default {
    mounted() {
      this.getMonthOrder()
      this.getOrderInfo()
      setTimeout(() => {
      this.painChart()
        this.flag = true
      }, 500)
      let _this = this;
      window.onresize = function() {
        _this.chart.resize()
      }
    },
    data() {
      return {
        images: [
          {id:0,idView:'http://image.zhiwei.com/zhiwei01.jpg'},
          {id:1,idView:'http://image.zhiwei.com/zhiwei02.jpg'},
          {id:2,idView:'http://image.zhiwei.com/zhiwei03.jpg'},
          {id:3,idView:'http://image.zhiwei.com/zhiwei04.jpg'}
        ],
        banH: 500,
        msgFlag: true,
        msgArray: 'el-icon-arrow-up',
        msgBoxFlag: true,
        chart2: '',
        titleMsg: [{
            title: '收入',
            date: '月',
            desc: '总收入',
            num: '4,886,200',
            persent: '85%',
            state: 2
          },
          {
            title: '订单',
            date: '全年',
            desc: '新订单',
            num: '26,200',
            persent: '20%',
            state: 1
          },
          {
            title: '访客',
            date: '今天',
            desc: '新访客',
            num: '3,280',
            persent: '24%',
            state: 1
          },
          {
            title: '活跃用户',
            date: '最近一月',
            desc: '12月',
            num: '6,200',
            persent: '23%',
            state: 0
          }
        ],
        orderTab: [{
            num: '2,346',
            title: '本月入库',
            persent: '48%',
            state: 1
          },
          {
            num: '4,836',
            title: '本月订单',
            persent: '60%',
            state: 0
          },
          {
            num: '9,366',
            title: '本月销售额',
            persent: '22%',
            state: 2
          },
        ],
        titleMsgIcon: {
          '2': 'fa fa-bolt',
          '1': 'fa fa-level-up',
          '0': 'fa fa-level-down',
          '7': 'fa fa-check-square', //勾选
          '8': 'fa fa-square-o', //未勾选
          '10': 'todo-completed' //完成
        },
        things: [{
            title: '开会',
            done: true,
            leftTime: '1小时'
          },
          {
            title: '项目发布',
            done: true,
            leftTime: '1小时'
          },
          {
            title: '修改bug',
            done: false,
            leftTime: '1小时'
          },
        ],
        titleMsgColor: {
          txt: ['label-success', 'label-info', 'label-primary', 'label-danger'],
          ico: ['text-success', 'text-info', 'text-navy', 'text-danger']
        },
        flag: false,
        chart: null,
        msgsTotol: 20,
        msgs: [{
          name: '井幽幽',
          msg: '有人说：“一辈子很长，要跟一个有趣的人在一起”。我想关注我的人，应该是那种喜欢找乐子也乐意分享乐趣的人，你们一定挺优秀的。所以单身的应该在这条留言，互相勾搭一下。特别有钱人又帅可以直接私信我！',
          timesAgo: '1月前',
          date: '4月11日 00:00'
        }],

        option: {
          grid: {
            left: 60,
            right: '6%',
            height: '65%',
            bottom: 24
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: ['订单量', '入库量', '月收益']
          },
          xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: '订单数',
              min: 0,
              max: 1500,
              interval: 300,
              axisLabel: {
                formatter: '{value} 单'
              }
            },
            {
              type: 'value',
              name: '收益',
              min: 0,
              max: 50,
              interval: 10,
              axisLabel: {
                formatter: '{value} 元'
              }
            }
          ],
          series: [{
              name: '订单量',
              type: 'bar',
              data: [],
              color: 'rgb(54, 127, 169)'
            },
            {
              name: '入库量',
              type: 'bar',
              data: [],
              color: 'rgb(0, 0, 0)'
            },
            {
              name: '月收益',
              type: 'line',
              yAxisIndex: 1,
              data: [],
              color: 'rgb(26, 179, 148)'
            }
          ]
        }
      }
    },
    methods: {
      async getMonthOrder(){
        const {data: result} = await this.$http.get('/order/thisMonth')
        if(result.status !== 200) return this.$message.error("本月订单信息查询失败")
        this.orderTab = result.data
        },
      async getOrderInfo(){
        const {data: result} = await this.$http.get('/order/info')
        if(result.status !== 200) return this.$message.error("订单信息查询失败")
        this.option.series[0].data = result.data.outNum
        this.option.series[1].data = result.data.inNum
        this.option.series[2].data = result.data.incomeNum
        var max = 0
        for(var n of result.data.outNum){
          max = n > max ? n : max
        }
        for(var m of result.data.inNum){
          max = m > max ? m : max
        }
        var interval = Math.ceil(max/5)
        this.option.yAxis[0].max = 5*interval
        this.option.yAxis[0].interval = interval
        var maxin = 0
        for(var p of result.data.incomeNum){
          maxin = p > maxin ? p : maxin
        }
        var interval2 = Math.ceil(maxin/5)*1.8
        this.option.yAxis[1].max = 5*interval2
        this.option.yAxis[1].interval = interval2
      },
      painChart() {
        this.chart = this.$echarts.init(this.$refs.flotChart)
        this.chart.setOption(this.option)
      },

      closeMsg() {
        this.msgBoxFlag = false
      }
    },
    directives: {
      drag: {}
    },
    watch: {
      option: function(val){
        if(val.series[0].data) this.painChart()
      },
      msgFlag: function(flag) {
        if (flag == true) {
          this.msgArray = 'el-icon-arrow-up'
        } else {
          this.msgArray = 'el-icon-arrow-down'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }

  /* v-enter-active 【入场动画的时间段】 */
  /* v-leave-active 【离场动画的时间段】 */
  .v-enter-active,
  .v-leave-active {
    transition: all 0.8s ease;
  }

   .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 2.75;
      line-height: 270px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
    }
  img{
  width:100%;
  height:100%;
  }

  .welcome {
    height: 100%;
  }
</style>
